<template>
  <el-date-picker
    v-model="date"
    v-bind="$attrs"
    class="primary-input"
    type="datetimerange"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    format="YYYY-MM-DD HH:mm:ss"
    :value-format="valueFormat"
    :unlink-panels="true"
    :shortcuts="isShortcuts ? shortcuts : []"
    :default-time="defaultTime"
    :clearable="clearable"
    :value-on-clear="() => undefined"
    @calendar-change="handleCalendarChange"
  />
</template>

<script lang="ts" setup>
import { defaultShortcuts, defaultTimeValue } from '@/utils/date'
import moment from 'moment'

interface Props {
  startPlaceholder?: string
  endPlaceholder?: string
  format?: string // 显示在输入框中的格式
  valueFormat?: string // 绑定值的格式
  isShortcuts?: boolean // 是否开启快捷方式
  shortcuts?: { text: string; value: any }[] // 快捷选项配置
  clearable?: boolean // 是否显示清除按钮
  defaultTime?: [Date, Date]
}

withDefaults(defineProps<Props>(), {
  plusTime: false,
  startPlaceholder: '请选择开始时间',
  endPlaceholder: '请选择结束时间',
  format: 'YYYY-MM-DD HH:mm:ss',
  valueFormat: 'YYYY-MM-DD HH:mm:ss',
  isShortcuts: true,
  clearable: true,
  shortcuts: () => defaultShortcuts,
  defaultTime: () => defaultTimeValue
})

const startTime = defineModel<string>('start', { default: '' })
const endTime = defineModel<string>('end', { default: '' })

const date = computed({
  get() {
    return [startTime.value, endTime.value]
  },
  set(val) {
    if (val && val.length === 2 && val[1]) {
      startTime.value = val[0]
      endTime.value = val[1]
    } else {
      startTime.value = ''
      endTime.value = ''
    }
  }
})

// 选中日历日期后会执行的回调；只有 datetimerange 才生效
const handleCalendarChange = (value: [Date, Date]) => {
  if (value.length === 2 && value[1]) {
    const _startTime = moment(value[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
    const _endTime = moment(value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    startTime.value = _startTime
    endTime.value = _endTime
  }
}
</script>
<style lang="scss" scoped></style>
